<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="./js/jQuery.min.js"></script>
        <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
        <script src="./bootstrap/js/bootstrap.min.js"></script>
        <style>
            .choice {
                background-color: red;
            }
        </style>
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container">
                <a class="navbar-brand" href="#">导航！</a>
                <button
                    class="navbar-toggler d-lg-none"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapsibleNavId"
                    aria-controls="collapsibleNavId"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                >
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="collapsibleNavId">
                    <ul class="navbar-nav me-auto mt-2 mt-lg-0">
                        <li class="nav-item">
                            <a
                                class="nav-link"
                                href="./index.html"
                                aria-current="page"
                                >Home</a
                            >
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./GPA_v2.html">GPA</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./notes.html">Note</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="#">Todo</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./test.html">Test</a>
                        </li>
                    </ul>
                    <form class="d-flex my-2 my-lg-0">
                        <input
                            class="form-control me-sm-2"
                            type="text"
                            placeholder="Search"
                        />
                        <button
                            class="btn btn-outline-success my-2 my-sm-0"
                            type="submit"
                        >
                            Search
                        </button>
                    </form>
                </div>
            </div>
        </nav>

        <div class="container mt-5">
            <div class="row">
                <div class="col-8">
                    <div class="row">
                        <div class="btns btn-group col-lg-auto">
                            <button
                                type="button"
                                class="chooseBtn btn btn-primary"
                            >
                                选择
                            </button>
                            <button
                                type="button"
                                class="addBtn btn btn-primary"
                            >
                                加一行
                            </button>
                            <!-- <button
                                type="button"
                                class="clearAllBtn btn btn-primary"
                            >
                                清除空行
                            </button> -->
                        </div>
                    </div>
                    <div class="row">
                        <div class="col p-0">
                            <ul class="mainul list-group list-group-flush">
                                <li class="first_li list-group-item rounded">
                                    <div class="input-group">
                                        <input
                                            type="text"
                                            class="form-control"
                                            name=""
                                            id=""
                                        /><button
                                            class="delBtn btn btn-secondary"
                                        >
                                            删除
                                        </button>
                                        <button
                                            class="finishBtn btn btn-secondary"
                                            id="1"
                                        >
                                            完成
                                        </button>
                                    </div>
                                </li>
                            </ul>
                            <div class="result"></div>
                        </div>
                        <div class="toast fade fixed-top" role="alert">
                            <div class="toast-header">
                                <strong class="me-auto">Error</strong>
                                <button
                                    class="btn-close"
                                    data-bs-dismiss="toast"
                                ></button>
                            </div>
                            <div class="toast-body">
                                <p>你什么也没写呢！</p>
                            </div>
                        </div>
                    </div>
                    <hr />
                    <br />
                    <div class="row px-3">已完成：</div>
                    <div class="row">
                        <div class="col p-0">
                            <ul
                                class="finishedul list-group list-group-flush"
                            ></ul>
                        </div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="form-check form-switch col">
                        <input
                            class="form-check-input autosave"
                            type="checkbox"
                            name=""
                            id="autosave"
                        />
                        <label for="autosave" class="form-check-label"
                            >自动保存</label
                        >
                    </div>
                </div>
            </div>
        </div>

        <script>
            window.onload = function () {
                let chooseBtn = document.querySelector(".chooseBtn");
                let addBtn = document.querySelector(".addBtn");
                // let clearAllBtn = document.querySelector(".clearAllBtn");
                let result = document.querySelector(".result");
                let ul = document.querySelector(".mainul");
                let first_li = document.querySelector(".first_li").cloneNode(1);
                // let timer;
                let finished = document.querySelector(".finishedul");
                let autosave = document.querySelector(".autosave");
                let toast = document.querySelector(".toast");

                function saveData() {
                    let data = {
                        unfinished: [],
                        finished: [],
                        autosave: false,
                    };
                    if (autosave.checked) {
                        data.autosave = true;
                    }

                    try {
                        for (let i = 0; i < ul.children.length; i++) {
                            data.unfinished.push(
                                ul.children[i].querySelector("input").value
                            );
                        }
                    } catch (err) {
                        console.log(err);
                    }
                    try {
                        for (let i = 0; i < finished.children.length; i++) {
                            data.finished.push(
                                finished.children[i].querySelector("input")
                                    .value
                            );
                        }
                    } catch (err) {
                        console.log(err);
                    }
                    localStorage.setItem("toDoListData", JSON.stringify(data));
                }

                function readData() {
                    let data = JSON.parse(localStorage.getItem("toDoListData"));
                    if (data.autosave) {
                        autosave.checked = true;
                        for (let i = 0; i < data.finished.length; i++) {
                            addBtn.click();
                            // $(".mainul").find("input").eq(0).val(data.finished[i]).siblings(".finishBtn").click();
                            $(".mainul")
                                .find("input")
                                .eq(0)
                                .val(data.finished[i])
                                .attr("disabled", "true")
                                .siblings(".finishBtn")
                                .text("恢复")
                                .siblings(".delBtn")
                                .attr("disabled", "true")
                                .siblings(".finishBtn")
                                .eq(0)
                                .attr("id", "0");
                            $(".mainul")
                                .find("li")
                                .eq(0)
                                .appendTo("ul.finishedul");
                        }
                        for (let i = 0; i < data.unfinished.length; i++) {
                            addBtn.click();
                            ul.children[i].querySelector("input").value =
                                data.unfinished[i];
                        }
                        clearAll();
                    }

                    $("#beforeUse").modal("show");
                }

                function showChoice(obj, n) {
                    for (let i = 0; i < ul.children.length; i++) {
                        $(".mainul").children().removeClass("choice");
                    }
                    clearInterval(obj.timer);
                    let len = ul.children.length;
                    let m = n + len * 5;
                    let i = len;
                    obj.timer = setInterval(function () {
                        if (i >= m) {
                            clearInterval(obj.timer);
                            result.innerHTML =
                                "最终的决定是：\t<b>" +
                                $(".mainul").find("input").eq(n).val() +
                                "</b>";
                            $(".chooseBtn").text("换一个");
                        }
                        $(".mainul")
                            .children("li")
                            .eq(i % len)
                            .addClass("choice");
                        $(".mainul")
                            .children("li")
                            .eq((i - 1) % len)
                            .removeClass("choice");
                        i++;
                        // console.log(i);
                    }, 100);
                }

                // 这段还没改成jquery
                document
                    .querySelector(".delBtn")
                    .addEventListener("click", function () {
                        ul.removeChild(this.parentNode.parentNode);
                    });
                document
                    .querySelector(".finishBtn")
                    .addEventListener("click", function () {
                        if (this.getAttribute("id") == "1") {
                            if (
                                this.previousElementSibling
                                    .previousElementSibling.value
                            ) {
                                this.previousElementSibling.disabled = true;
                                this.previousElementSibling.previousElementSibling.disabled = true;
                                this.innerHTML = "恢复";
                                this.setAttribute("id", "0");
                                $(this)
                                    .parent()
                                    .parent()
                                    .fadeOut("normal", function () {
                                        $(this)
                                            .siblings("input")
                                            .prop("disabled", true);
                                        finished.append(this);

                                        $(this).removeClass("choice", 300);
                                        $(this).fadeIn();
                                    });
                            } else {
                                toast.classList.add("show");
                            }
                        } else {
                            this.previousElementSibling.disabled = false;
                            this.previousElementSibling.previousElementSibling.disabled = false;
                            this.innerHTML = "完成";
                            this.setAttribute("id", "1");
                            $(this)
                                .parent()
                                .parent()
                                .fadeOut("normal", function () {
                                    $(this)
                                        .siblings("input")
                                        .prop("disabled", false);
                                    ul.append(this);
                                    $(this).fadeIn();
                                });
                        }
                    });

                chooseBtn.addEventListener("click", function () {
                    clearAll();
                    let ulNum = ul.children.length;
                    if (ulNum < 1) {
                        $(".result").text("你还什么都没写！");
                    } else if (ulNum == 1) {
                        $(".result").text("只有一个选项哦！");
                        $(".mainul").find("li").addClass("choice");
                    } else {
                        choice = Math.floor(Math.random() * ulNum);
                        showChoice(this, choice);
                    }
                    saveData();
                });

                $("#autosave").click(()=>{
                    saveData();
                })

                addBtn.addEventListener("click", function () {
                    let clone = first_li.cloneNode(1);
                    clone.classList.remove("first_li");
                    clone
                        .querySelector(".delBtn")
                        .addEventListener("click", function () {
                            ul.removeChild(this.parentNode.parentNode);
                        });
                    clone
                        .querySelector(".finishBtn")
                        .addEventListener("click", function () {
                            // console.log(
                            //     this.previousElementSibling.previousElementSibling
                            //         .value
                            // );                        // console.log(
                            //     this.previousElementSibling.previousElementSibling
                            //         .value
                            // );

                            if (this.getAttribute("id") == "1") {
                                // console.log(this);
                                if (
                                    this.previousElementSibling
                                        .previousElementSibling.value
                                ) {
                                    // console.log(this);
                                    this.previousElementSibling.disabled = true;
                                    this.previousElementSibling.previousElementSibling.disabled = true;
                                    this.innerHTML = "恢复";
                                    this.setAttribute("id", "0");
                                    $(this)
                                        .parent()
                                        .parent()
                                        .fadeOut("normal", function () {
                                            $(this)
                                                .siblings("input")
                                                .prop("disabled", true);
                                            finished.append(this);
                                            // console.log(this);
                                            $(this).removeClass("choice", 300);
                                            $(this).fadeIn();
                                        });
                                    // this.previousElementSibling.previousElementSibling.disabled = true;
                                } else {
                                    toast.classList.add("show");
                                }
                            } else {
                                this.previousElementSibling.disabled = false;
                                this.previousElementSibling.previousElementSibling.disabled = false;
                                this.innerHTML = "完成";
                                this.setAttribute("id", "1");
                                $(this)
                                    .parent()
                                    .parent()
                                    .fadeOut("normal", function () {
                                        $(this)
                                            .siblings("input")
                                            .prop("disabled", false);
                                        ul.append(this);
                                        $(this).fadeIn();
                                    });
                                // this.previousElementSibling.previousElementSibling.disabled = false;
                                // ul.append(this.parentNode.parentNode);
                                // this.setAttribute("id", "1");
                                // this.previousElementSibling.disabled = false;
                                // this.innerHTML = "完成";
                            }
                        });
                    ul.appendChild(clone);
                });

                let clearAll = () => {
                    for (var i = ul.children.length - 1; i >= 0; i--) {
                        if (!ul.children[i].children[0].children[0].value) {
                            ul.removeChild(ul.children[i]);
                        }
                    }
                };

                readData();
            };
        </script>
    </body>
</html>
